<template>
	<view class="container">
		<text class="title">登录</text>

		<uni-forms ref="form" :model="user" :rules="rules" class="useform">
			<uni-forms-item label="手机号" name="phone">
				<uni-easyinput type="text" v-model="user.phone" placeholder="请输入账号..."></uni-easyinput>
			</uni-forms-item>
			
			<uni-forms-item label="密码" name="password">
				<uni-easyinput type="password" v-model="user.password" placeholder="请输入密码..."></uni-easyinput>
			</uni-forms-item>
			
			<uni-forms-item prop="agreement">
				<checkbox 
					v-model="form.agreement" 
					:true-label="1" 
					:false-label="0"
					@click="handleAgreeTermsChange">
					我已阅读并同意《隐私政策》和《服务条款》</checkbox>
			</uni-forms-item>
			
			<uni-forms-item>
				<button class="button2" @click="login">登录</button> 
			</uni-forms-item>
		</uni-forms>
		
		<view class="register" @click="goToRegister">没有账号，注册一个</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				phone:'',
				password:'',
			},
			user:{},
			rules:{
				phone:[
					{ required: true, message: "手机号不能为空", trigger: "blur" },
					{ pattern: /^1[3-9]\d{9}$/, message: "请输入有效的手机号", trigger: ["blur", "change"] }
				],
				password: [
					{ required: true, message: "密码不能为空", trigger: "blur" },
					{ min: 8, max: 30, message: '密码长度应大于等于8个字符小于30个字符', trigger: ['blur', 'change'] },
					// 可根据需求添加复杂度校验，例如包含数字、字母等
				],
				agreement: [
					{ required: true, message: "请先同意隐私政策和服务条款", trigger: "change" },
				]
			},
			agreement:0, // 默认为未勾选
		};
	},
	
	methods: {
		handleAgreeTermsChange() {
		    this.agreement = !this.agreement;
		},
		async login(){
			// 检查用户是否同意了隐私条款
			if (!this.agreement) {
			    uni.showToast({
					title: '请先同意相关协议',
					icon: 'none'
			    });
			    return	;
			}
			
			this.$refs.form.validate().then((res)=>{
				uni.request({
					url:"http://localhost:8090/api/users/login",
					method:"POST",
					data:{
						phone:this.user.phone,
						password:this.user.password
					},
					success:(result)=>{
						if(result.data.message != null) {
							uni.showToast({
								title:"登录成功",
								icon:"success",
								duration:2000
							});
							setTimeout(()=>{
								this.user = {};
								
								// 假设 result.data.data 是包含完整用户信息的对象
								let userInfo = result.data.data;
								
								// console.log(this.user);
								
								// 将整个用户信息对象转为JSON字符串并保存
								uni.setStorageSync("userInfo", JSON.stringify(userInfo));
								this.user = userInfo;	// 直接更新this.user
								
								console.log(this.user);
								
								uni.reLaunch({
									url:"/pages/version1/spoPage_v1"
								})
							},2000);
						} else {
							uni.showToast({
								title:result.data.describe,
								icon:"error"
							});
						}
					}
				});
			});
		},
		goToRegister(){
			uni.navigateTo({
				url:'/pages/version1/register_ph_v1'
			})
		},
	},
};
</script>

<style scoped>
	.useform{
		margin-left: 5%;
		width:90%;
	}
	.container {
		display: flex;
		flex-direction: column;  
		/* align-items: center;  */
		justify-content: center; 
		height: 100%; /* 将容器高度设置为视口高度 */  
		/* width: 96%; */
		margin: 3rpx 3rpx 3rpx 3rpx;
	}  
	
	.login-form {  
		width: 300px;  
		padding: 20px;  
		/* border: 1px solid #ccc;  */
		border: 1px #ccc;
		border-radius: 10px;
		margin-left: 3%;
		margin-right: 3%;
		margin-bottom: 7%;
	}  
	
	.title {
		text-align: center;
		font-size: 36px;  
		margin-top: 100rpx;
		margin-bottom: 200rpx; 
	}  
	
	.input-container {
		width: 81%;
		margin-bottom: 20px; /* 为输入手机号和获取验证码之间添加一些间距 */  
		margin-left: 7%;
		margin-right: 7%;
		
	}  
	
	.input {
		width: 100%;  
		height: 80rpx;  
		padding: 0 10px;  
		border: 1px solid #ccc;  
		margin-right: 2%;
		
	}  
	
	.privacy{
		text-align: center;
		font-size: 12px;
		margin-bottom: 12%;
		.cha{
			color: blue;
		}
		margin-left: -10%;
	}
	
	.button2{
		width: 86%;
		height: 96rpx;
		background-color: #007aff;
		color: #fff;
		border-radius: 30px;  
	}
	
	.register{
		margin-left: 60%;
	}
</style>
